<template>
	<div ref="GoodsCategory">
		<el-dialog title="商品类别" :visible.sync="dialogFormVisible" :close-on-press-escape="false" width="400px"
			:close-on-click-modal="false" @closed="afterCloseDialog">
			<el-form :model="goodsCategoryForm" ref="goodsCategoryForm" :rules="formRules" label-width="100px">
				<el-row>
					<el-col :md="24">
						<el-form-item label="类别名称" prop="categoryName">
							<el-input v-model="goodsCategoryForm.categoryName" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">返回</el-button>
				<el-button type="primary" @click="saveForm">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "GoodsCategory",
	data() {
		return {
			dialogFormVisible: false,
			goodsCategoryForm: {
				categoryName: null
			},
			formRules: {
				categoryName: [{ required: true, message: "请输入类别名称" }]
			}
		};
	},
	methods: {
		initForm(id) {
			if (id) {
				this.goodsCategoryForm.id = id;
				this.$api.post('/goodsCategory/getById', {id:id}).then(response => {
					this.dialogFormVisible = true;
					let goodsCategory = response.data;
					this.goodsCategoryForm = goodsCategory;
				});
			} else {
				this.dialogFormVisible = true;
			}
		},
		saveForm() {
			let url = '/goodsCategory/add';
			if (this.goodsCategoryForm.id) {
				url = '/goodsCategory/update';
			}
			
			this.$refs.goodsCategoryForm.validate(valid => {
				if (valid) {
					this.$api.post(url, this.goodsCategoryForm).then(response => {
						if (response.success) {
							this.$message.success(response.message);
							this.dialogFormVisible = false;
							this.$parent.handleSearch();
						} else {
							this.$message.error(response.message);
						}
					});
				}
			});
		},
		afterCloseDialog() {
			this.goodsCategoryForm = {
				categoryName: null
			};
			this.$refs.goodsCategoryForm.resetFields();
		}
	}
};
</script>